<template>
  <div class="form-item">
    <div class="label">
      <span class="required" v-if="info.required">*</span>
      {{ info.label }}
    </div>
    <!-- 基本输入框 -->
    <div class="value" v-if="info.type === 'input'">
      <Field
        class="hei24"
        v-model="modelValue"
        @update:model-value="modelValueChange"
        :placeholder="info.placeholder"
      />
    </div>
    <!-- 单选框 -->
    <div class="value" v-if="info.type === 'radio'">
      <Field class="hei24" :placeholder="info.placeholder">
        <template #input>
          <RadioGroup
            v-model="modelValue"
            @update:model-value="modelValueChange"
            direction="horizontal"
          >
            <Radio
              v-for="(item, index) in info.radioInfo"
              :key="index"
              :name="item.name"
              shape="square"
              >{{ item.value }}</Radio
            >
          </RadioGroup>
        </template>
      </Field>
    </div>
    <!-- 地区选择 -->
    <div
      class="value flex_center"
      @click="showCascader = true"
      v-if="info.type === 'cascader'"
    >
      <div
        class="hei24"
        :class="{
          color_gray: modelValue.length <= 0,
        }"
      >
        {{ modelValue || info.placeholder }}
      </div>
      <van-icon name="arrow" />
    </div>
    <!-- 添加标签 -->
    <div class="value flex_center" v-if="info.type === 'link'">
      <div
        class="hei24"
        :class="{
          color_gray: modelValue.length <= 0,
        }"
      >
        {{ modelValue || info.placeholder }}
      </div>
      <van-icon name="arrow" />
    </div>
    <!-- 级联选择框 -->
    <div v-if="info.type === 'cascader'">
      <van-popup v-model:show="showCascader" round position="bottom">
        <Cascader
          v-model="modelValue"
          title="请选择所在地区"
          :options="options"
          @finish="onFinish"
        />
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from "vue";
import { Field, Cascader, Popup as vanPopup, RadioGroup, Radio } from "vant";
const props = defineProps({
  info: {
    type: Object,
    default: {
      required: true, //是否必填
      label: "称呼", //label文案
      type: "input", //类型
      labelWidth: "",
    },
  },
  modelValue: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:modelValue"]);
const modelValueChange = (value) => {
  emit("update:modelValue", value);
};
const checked = ref("");
const showCascader = ref(false);
const cascaderValue = ref("");
const options = ref([
  {
    text: "浙江省",
    value: "330000",
    children: [{ text: "杭州市", value: "330100" }],
  },
  {
    text: "江苏省",
    value: "320000",
    children: [{ text: "南京市", value: "320100" }],
  },
]);
const onFinish = ({ selectedOptions }) => {
  showCascader.value = false;
  const value = selectedOptions.map((option) => option.text).join("/");
  emit("update:modelValue", value);
};
</script>

<style lang="less" scoped>
.form-item {
  width: 100%;
  padding: 16px 12px;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #e8ebf0;
  .label {
    line-height: 24px;
    flex-basis: 70px;
    width: 70px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #727f93;
    position: relative;
  }
  .required {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f76a50;
    position: absolute;
    top: 0;
    left: -8px;
  }
  .value {
    flex: 1;
  }
  .flex_center {
    display: flex;
    align-items: center;
  }
  .hei24 {
    flex: 1;
    min-height: 24px;
    line-height: 24px;
    padding: 0;
    font-size: 17px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2b2c2d;
  }
  .color_gray {
    color: #b4bccc;
  }
}
</style>